<template>
  <modal v-model="value" @click.self.native="clickModal">
    <div class="action-sheet-wrapper" :class="{show: value}">
      <slot></slot>
    </div>
  </modal>
</template>

<script>
import modal from 'components/modal'

export default {
  name: 'action-sheet',
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    clickModal () {
      this.$emit('modal')
    }
  },
  components: { modal }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .action-sheet-wrapper {
    padding: 12px;
    max-height: 60%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: @color-background;
    overflow-y: scroll;
    transform: translateY(100%);
    transition: all .5s;
  }
  .action-sheet-wrapper.show {
    transform: translateY(0);
  }

</style>
